@import 'base';
@import 'btn-base';
@import 'font-red';
@import 'font-base';
@import 'font-blue';
@import 'font-themeGreen';
@import 'lol-league-btn-blueBasic';
@import 'service-center-formelement';
@import 'lol-league-modal';
@import 'service-modules';
/*公共样式*/
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
  padding: 0;
}

*{margin: 0;padding: 0;}
body {font: 12px/1.5 'Helvetica Neue','Lucida Grande','Microsoft YaHei',Arial,'Liberation Sans',FreeSans,'Hiragino Sans GB',sans-serif;color: #44474e;word-break: break-all;word-wrap: break-word;
  background-color: #efefef;}
.header{background-color: #f3f6fb;height: 30px;}
.nav{height: 70px;background-color: #22262a;}
#bodyer{min-height: 632px;padding-top: 20px;}
a{color: #44474e;}
a:focus,a:active,a:hover{outline: none;text-decoration: none;}
form, ol, ul { margin: 0;padding: 0;}
ul li{list-style:none}
li{list-style-type:none;}
textarea,button,input{outline: none;}
p{margin: 0px;}
.ellipsis{overflow: hidden;white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;word-break: normal;word-wrap: normal;}
body .container{width: 1080px;padding: 0;}
.f0{
  font-size: 0;
}
body{
  background: #1d2125;
}
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  word-break: normal;
  word-wrap: normal;
}
/*lol-背景*/
#bodyer {
  background: #1d2126 url("../img/service-center/service-bg.png") no-repeat top center;
  padding: 0 0 20px 0;
  height: auto;
}
/* 顶部搜索条 */
#body{
  background: url("../img/lol-bg.jpg") no-repeat top center;
  padding: 0 0 20px 0;
}
.bg-search{
  width: 100%;
  height: 110px;
}
.wrapper-search{
  padding: 35px 0;
  width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.bar-search{
  position: relative;
  color: #fff;
  input{
    width: 400px;
    margin-right: 10px;
    background: transparent;
    border: 1px solid transparent;
    padding: 0 16px;
  }
}
.deco-search{
  &:hover{
  }
  position: relative;
  height: 39px;
  border-radius: 25px;
  color: #fff;
  font-size: 12px;
  z-index: 2;
  left: 0;
  border: none;
  background: transparent;
  border: 1px solid transparent;
}
.deco-search-bg{
  position: absolute;
  display: block;
  border: 1px solid #fff;
  border-radius: 25px;
  background: rgba(255, 255, 255,.3);
  opacity: .5;
  height: 39px;
  width: 400px;
  left: 278px;
  top: 0;
  z-index: 1;
}
.btn-ask{
  width: 116px;
  height: 39px;
  border: 1px solid transparent;
}
.btn-ask:hover{
  background: rgba(20,185,214,.5);
  border: 1px solid rgba(20,185,214,.5);
}
.btn-ask:before{
  position: absolute;
  display: block;
  content: "";
  width: 116px;
  height: 39px;
  border: 1px solid #fff;
  border-radius: 25px;
  background: rgba(255, 255, 255,.3);
  opacity: .5;
  top: -1px;
  left: -1px;
  z-index: 1;
}
::-webkit-input-placeholder { /* WebKit browsers */
  color: #fff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #fff;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #fff;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #fff;
}

.isearch{
  position: absolute;
  display: block;
  top: 0;
  left: 628px;
  color: #fff;
  i{
    font-size: 26px;
  }
}

/*反馈问题正文顶部*/

.fb-wrapper{
  padding: 0 20px;
}
.fb-header{
  width: 100%;
  height: 60px;
  background: #22262a;
  font-size: 14px;
  color: rgba(255,255,255,.7);
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  .nav{
    height: 60px;
    float: left;
    background: transparent;
  }
  .nav-tabs{
    border-bottom: none;
  }
  ul{
    li{
      & + li{
        margin-left: 76px;
      }
      &:first-child{
        margin-left: 20px;
      }
      display: block;
      text-align: center;
    }
  }
  span{
    height: 60px;
    line-height: 60px;
    font-size: 12px;
    padding-right: 20px;
    i{
      font-size: 18px;
    }
  }

}
.service-tabs>li>a,
.service-tabs>li.active>a{
  padding: 0;
  height: 60px;
  line-height: 60px;
  border-top: 2px solid transparent;
  border-left: none;
  border-right: none;
  border-bottom: none;
  margin-right: 0;
  background: transparent;
  color: rgba(255,255,255,.7);
  border-radius: 2px 2px 0 0;
}
.service-tabs>li.active>a{
  color: #14b9d6;
  border-top: 2px solid #14b9d6;
}
.service-tabs>li>a:hover,
.service-tabs>li>a:focus {
  background-color: transparent;
  border: none;
  border-top: 2px solid #14b9d6;
  color: #14b9d6;
}

.service-tabs>li.active>a:hover,
.service-tabs>li.active>a:focus,
.service-tabs>li.active>a:visited,
.service-tabs>li.active>a:focus{
  background-color: transparent;
  border-top: 2px solid #14b9d6;
  color: #14b9d6;
  border-left: none;
  border-right: none;
  border-bottom: none;
  margin-right: 0;

}


/* 反馈问题正文侧栏 */

.fb-bodyer{
  position: relative;
  background: #2e3238;
}
.fb-bodyer:before{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  content: '';
  display: block;
  background: #34393f;
  width: 220px;
}
.fb-sideBar{
  width: 220px;
  padding-bottom: 50px;
  position: relative;
}
.fb-sideNav{
  li{
    a{
      &:before{
        content: "";
        width: 32px;
        height: 60px;
        position: absolute;
        left: 100%;
        border-bottom: 1px dashed #444953;
      }
      &:after{
        content: "";
        width: 32px;
        height: 60px;
        position: absolute;
        right: 100%;
        border-bottom: 1px dashed #444953;
      }
      &:hover{
        color: #14b9d6;
        i{
          border-color: #14b9d6;
          color: #14b9d6;
        }
      }
      display: block;
      width: 116px;
      position: relative;
      height: 60px;
      line-height: 60px;
      color: #c8c8c9;
      border-bottom: 1px solid #444953;
      margin: 0 auto;
      text-align: center;
      font-size: 14px;
    }
  }
}
.service-sidenav-icon{
  display: inline-block;
  margin-right: 20px;
  vertical-align: middle;
  width: 35px;
  height: 35px;
  line-height: 33px;
  border-radius: 50%;
  border: 1px solid #8a8d90;
  color: #8a8d90;
}
.service-sidenav-icon.icon-roll{
  font-size: 20px;
}
.fb-deco-btn{
  font-size: 16px;
  &:hover{
    background: #14b9d6;
    color: #fff;
  }
  &:focus{
    color: #fff;
  }
  display: block;
  position: relative;
  width: 100%;
  height: 40px;
  line-height: 40px;
  border: none;
  background: #24798b;
  color: #fff;
  padding-left: 40px;
  text-align: center;
  i{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: #14b9d6;
    font-size: 24px;
  }
}
/*客服中心首页*/
.notice{
  margin-top: 20px;
  li{
    &:hover{
      box-shadow: 2px ;
    }
    & + li{
      margin-left: 20px;
    }
    display: inline-block;
    a{
      &:hover{
        box-shadow: 0 0 10px #14b9d6;
      }
      display: block;
      .news{
        width: 260px;
        height: 111px;
        font-size: 14px;
        padding: 35px 0 0 20px;
      }
    }
  }
}
.notice1{
  a{
    background: url("../img/service-center/notice1.png") no-repeat center;
    color: #336ba3;
  }
}
.notice2{
  a{
    background: url("../img/service-center/notice2.png") no-repeat center;
    color: #65599d;
  }
}
.notice3{
  a{
    background: url("../img/service-center/notice3.png") no-repeat center;
    color: #47779a;
  }
}

/*自助服务*/
.help-self{
  width: 100%;
  height: auto;
  padding: 20px;
  border-style: solid;
  border-width: 0 1px 1px 1px;
  border-color: transparent #444953 #444953 #444953;
}
.help-self-media-list{
  li{
    & + li{
      margin-left: 15px;
    }
    margin-top: 0;
    display: inline-block;
  }
}
.help-self-media-link{
  &:hover{
    background: #40434d;
    border: 1px solid #444953;
  }
  border: 1px solid transparent;
  background: #393f46;
  display: table-cell;
  vertical-align: middle;
  width: 180px;
  height: 101px;
  padding: 0 10px 0 13px;
  .media-body{
    vertical-align: middle;
    color: #8a8d90;
    h6{
      color: #c8c8c9;
    }
  }
  .media-left{
    i{
      font-size: 46px;
      color: #c8c8c9;
    }
  }
}

/*网站公告*/
.service-list{
  li{
    height: 53px;
    border-bottom: 1px solid #444953;
    a{
      &:hover{
        color: #14b9d6;
        display: inline-block;
        i{
          border-color: transparent transparent transparent #14b9d6;
        }
        .ask-time,
        .ask-type,
        .ask-detail,
        .ask-num{
          color: #14b9d6;
        }

      }
      display: block;
      height: 53px;
      color: #c8c9ca;
      width: 800px;
      padding-top: 24px;
      i{
        display: inline-block;
        margin-right: 1px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 4.5px 0 4.5px 5px;
        border-color: transparent transparent transparent #fff;
      }
    }

  }
}

/*网站公告详情*/
.announcement-content{
  text-align: center;
  .head{
    padding-top: 27px;
    display: inline-block;
    margin: 0 -20px;
    width: 860px;
    height: 110px;
    background: url("../img/service-center/step-bg.png") no-repeat center;
    h3{
      margin-bottom: 18px;
      color: #e0e0e0;
    }
    .content-detail{
      color: #afb0b2;
    }
  }
}
.webname{
  margin-right: 16px;
}
.read-num{
  margin-left: 18px;
}
.content-img{
  text-align: center;
  img{
    display: inline-block;
  }
}
.center-content{
  padding: 20px 0;
  text-align: left;
  p{
    text-indent: 2em;
    color: #afb0b2;
    font-size: 16px;
    line-height: 30px;
  }
}
/*我的提问*/
.ask-status{
  color: #c8c9ca;
  position: absolute;
  right: 20px;
}
.ask-status.green{
  color: #65a33b;
}
.ask-time{
  color: #8a8d90;
  margin-left: 19px;
}
.ask-type{
  margin-left: 9px;
}
.ask-detail{
  color: #8a8d90;
  display: inline-block;
  width: 100px;
}
.ask-detail{
  margin-left: 11px;
}
.font-questionsum{
  color: #cecfcf;
}
.question-describ{
  margin-bottom: 13px;
}
.talk-record-list{
  li{
    & + li{
      margin-top: 50px;
    }
  }
}
.talk-record-list-item{
  p{
    line-height: 1;
    padding-left: 20px;
    border-bottom: 1px solid #444953;
    padding-bottom: 10px;
  }
}
.talk-record-list-content{
  color: #cecfcf;
  font-size: 14px;
  padding: 20px;
  line-height: 1;
}
.user-name{
  display: inline-block;
  width: 94px;
}
/* 反馈问题正文 */
.fb-content{
  width: 860px;
  hr{
    margin: 0;
  }
}
/* 正文进度条 */
.fb-stepBar{
  padding: 25px 0;
  background: url("../img/service-center/step-bg.png") no-repeat center;
  ul{
    li{
      position: relative;
      height: 60px;
      & + li{
        width: 190px;
      }
      div{
        position: absolute;
        right: 0;
        padding: 5px;
        display: block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        border-radius: 20px;
        background: rgba(0,0,0,.2);
        text-align: center;
        font-size: 18px;
        span{
          z-index: 4;
          position: absolute;
          display: block;
          width: 30px;
          height: 30px;
          line-height: 30px;
          border-radius: 15px;
          font-family: Arial;
          font-size: 18px;
          font-weight: 700;
          color: #fff;
          text-align: center;
        }
      }
      b{
        z-index: 1;
        position: relative;
        display: block;
        height: 8px;
        width: 152px;
        top: 18px;
        right: 1px;
        background: rgba(0, 0, 0, 0.2);
      }
      i{
        display: block;
        height: 8px;
      }
      p{
        position: absolute;
        color: #cecfcf;
        width: 86px;
        font-size: 12px;
        left: 50%;
        margin-left: -41px;
        bottom: -35px;
      }
    }
    .active{
      span{
        background: #18abc6;
      }
      b:after{
        position: absolute;
        content: '';
        display: block;
        height: 2px;
        width: 163px;
        top: 3px;
        right: -5px;
        background: #18abc6;
        z-index: 3;
      }
    }
    li:first-child{
      margin-left: 125px;
    }
  }
}


/* 正文表单 */
.fb-form{
  padding: 20px 0;
  color: #8a8d90;
  .form-group{
    margin-bottom: 15px;
    margin-left: 0;
    margin-right: 0;
    label{
      font-size: 14px;
      font-weight: 500;
      height: 40px;
      line-height: 40px;
      margin-bottom: 0;
      text-align: right;
      padding-right: 10px;
      color: #cecfcf;
    }
    .form-control{
      height: 40px;
      resize: none;
      color: #cecfcf;
    }
    .question-detail{
      height: 200px;
      margin-bottom: 10px;
    }
  }

}
.fb-btn-upload{
  &:hover{
    color: #fff;
    background: #3dbad1;
  }
  width: 120px;
  padding: 8px 12px;
  background: #18abc6;
  color: #cecfcf;
  border-radius: 0;

}
.fb-btn-submit{
  &:hover{
    color: #fff;
    background: #3dbad1;
  }
  color: #cecfcf;
  width: 80px;
  padding: 8px 12px;
  border-radius: 0;
  background: #444953;
}
.font-upload{
  margin-left: 13px;
  display: inline-block;
}
/*提交图片*/
.submit-img{
  margin-left: 71px;
  margin-top: 15px;
  li{
    & + li{
      margin-left: 10px;
    }
    position: relative;
    width: 170px;
    height: 102px;
    display: inline-block;
    border: 1px solid #474b50;
    padding: 4px;
    button.screen-close{
      color: #fff;
      width: 16px;
      height: 16px;
      line-height: 16px;
      position: absolute;
      border: none;
      top: 2px;
      right: 2px;
      background: rgba(20,185,214,.6);
      text-align: center;
      i{
        font-size: 14px;
      }
    }
    button.screen-scale{
      color: #fff;
      width: 31px;
      height: 31px;
      line-height: 31px;
      position: absolute;
      border: none;
      bottom: 5px;
      right: 5px;
      background: rgba(20,185,214,.6);
      text-align: center;
      i{
        font-size: 21px;
      }
    }
  }
}
.talk-screen-cut{
  margin-left: 0;
}
.service-textarea{
  width: 100%;
  background: #393f46;
  color: #cecfcf;
  resize: none;
  border: 1px solid transparent;
  padding: 16px;
}
.service-btns{
  padding: 10px;
  background: #444953;
  margin-top: -4px;
  .btn{
    color: #fff;
    width: 120px;
    border-radius: 0;
    padding: 7px 12px;
  }
  .btn-upload{
    &:hover{
      background: rgba(54,135,69,1);
    }
    background: rgba(54,135,69,.8);
  }
  .btn-send{
    &:hover{
      background: rgba(20,185,214,1);
    }
    background: rgba(20,185,214,.8);
    margin-left: 10px;
  }
  .btn-close{
    &:hover{
      background: rgba(57,63,70,1);
    }
    background: rgba(57,63,70,.8);
  }
}

/*我要申诉*/
.fb-tips{
  background: #fff5eb;
  color: #ff8400;
  padding: 10px;
}

/*我的提问列表*/
.fb-question-list{
  padding: 13px 0;
  border-bottom: 1px solid #d2e6ea;
}
.btn-goOnToAsk{
  background: #fff;
  border: 1px solid #16b2ce;
  border-radius: 0;
  padding: 6px 32px;
}

/*我的提问详情*/
.chatrecord-userName{
  color: #0fce49;
}
.question-summary{
  border-bottom: 1px solid #45c1d8;
}
.question-content{
  line-height: 27px;
}
.question-user{
  color: #de6e33;
}
.record-title{
  border-bottom: 1px solid #d2e6ea;
  padding-bottom: 5px;
  margin: 0;
}
.record-content{
  border-bottom: 1px solid #45c1d8;
}
.chat-line{
  line-height: 27px;
}
.chat-user{
  color: #0fce49;
  margin-right: 2px;
}
.chat-vpServer{
  margin-right: 2px;
}
.chat-time{
  color: #ababbd;
}
.chat-summary{
  padding-top: 5px;
}
.btns-question{
  line-height: 28px;
}
.btn-chat-send,
.btn-chat-uploadImage{
  background: #fff;
  border: 1px solid #16b2ce;
}
.btn-chat-close{
  background: #fff;
  border: 1px solid #bdbec1;
  color: #bdbec1;
}
.fb-img{
  border: 1px solid #d7dde4;
  width: 228px;
  height: 103px;
  padding: 5px;

}
.chat-bg-search{
  right: 10px;
  bottom: 10px;
  width: 28px;
  height: 28px;
  background: rgba(65, 154,172,0.7 );
  color: #fff;
  padding: 2px 0 2px 5px;
}
/*弹窗*/
.league-modal-wrap {
  width: 490px; }
.fb-modal{
  .modal-header{
    border: none;
    padding: 8px;
  }
  .modal-body{
    border: none;
    p{
      margin: 0;
    }
  }
  .modal-footer{
    border: none;
  }
}
